$(function () {
    layui.config({
        version: '1554901097999' //为了更新 js 缓存，可忽略
    });

    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function(){
        var laydate = layui.laydate //日期
            ,laypage = layui.laypage //分页
            ,layer = layui.layer //弹层
            ,table = layui.table //表格
            ,carousel = layui.carousel //轮播
            ,upload = layui.upload //上传
            ,element = layui.element //元素操作
            ,slider = layui.slider //滑块

        //向世界问个好
        layer.msg('Hello World');

        //监听Tab切换
        element.on('tab(demo)', function(data){
            layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {
                tips: 1
            });
        });

        //执行一个 table 实例
        table.render({
            elem: '#demo'
            ,height: 420
            ,url: '/country/getList' //数据接口
            ,title: '用户表'
            ,page: true //开启分页
            ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            ,totalRow: true //开启合计行
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', type : 'numbers'}
                ,{field: 'code', title: 'code', width:80}
                ,{field: 'name', title: 'name', width: 90, sort: true, totalRow: true}
                ,{field: 'status', title: 'status', sort: true, width: 100,templet :function (d) {
                    debugger;
                    var html = '';
                    if (d.status == '0'){
                        html += '<span class="btn btn-info">已注销</span>'
                    }else {
                        html += '<span class="btn btn-success">正常</span>'
                    }
                    return html;
                    }}
                ,{field: 'continent', title: 'continent', width:80, sort: true}
                ,{field: 'region', title: 'region', width: 80, sort: true, totalRow: true}
                ,{field: 'surfacearea', title: 'surfacearea', width:150, totalRow: true}
                ,{field: 'indepyear', title: 'indepyear', width: 200}
                ,{field: 'population', title: 'population', width: 100}
                ,{field: 'gnpold', title: 'gnpold', width: 100}
                ,{field: 'localname', title: 'localname', width: 100}
                ,{field: 'governmentform', title: 'governmentform', width: 100}
                ,{field: 'headofstate', title: 'headofstate', width: 100}
                ,{field: 'capital', title: 'capital', width: 100}
                ,{field: 'lifeexpectancy', title: 'lifeexpectancy', width: 135, sort: true, totalRow: true}
                ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
            ]]
            ,request: {
                pageName: 'page' //页码的参数名称，默认：page
                ,limitName: 'limit' //每页数据量的参数名，默认：limit
            }
            ,response: {
                statusName: 'code' //规定数据状态的字段名称，默认：code
                ,statusCode: 200 //规定成功的状态码，默认：0
                ,msgName: 'msg' //规定状态信息的字段名称，默认：msg
                ,countName: 'count' //规定数据总数的字段名称，默认：count
                ,dataName: 'data' //规定数据列表的字段名称，默认：data
            }
        });

        //监听头工具栏事件
        table.on('toolbar(test)', function(obj){
            debugger;
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
            switch(obj.event){
                case 'add':
                    add();
                    break;
                case 'update':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else if(data.length > 1){
                        layer.msg('只能同时编辑一个');
                    } else {
                        edit(data[0]);
                        console.log(checkStatus.data[0]);
                    }
                    break;
                case 'delete':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else {
                        var ids = [];
                        for (var i = 0; i < data.length ; i++) {
                            ids.push(data[i].code);
                        }
                        del(ids);
                    }
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            debugger;
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
                layer.msg('查看操作');
                layer.alert("获取的数据:"+JSON.stringify(data));
                edit(data);
            } else if(layEvent === 'del'){
                var ids = [];
                ids.push(data.code);
                layer.confirm('真的删除行么', function(index){
                    del(ids);
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){
                layer.alert("获取的数据:"+JSON.stringify(data));
                edit(data);
                layer.msg('编辑操作');
            }
        });

        //执行一个轮播实例
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,height: 200
            ,arrow: 'none' //不显示箭头
            ,anim: 'fade' //切换动画方式
        });

        //将日期直接嵌套在指定容器中
        var dateIns = laydate.render({
            elem: '#laydateDemo'
            ,position: 'static'
            ,calendar: true //是否开启公历重要节日
            ,mark: { //标记重要日子
                '0-10-14': '生日'
                ,'2018-08-28': '新版'
                ,'2018-10-08': '神秘'
            }
            ,done: function(value, date, endDate){
                if(date.year == 2017 && date.month == 11 && date.date == 30){
                    dateIns.hint('一不小心就月底了呢');
                }
            }
            ,change: function(value, date, endDate){
                layer.msg(value)
            }
        });

        //分页
        laypage.render({
            elem: 'pageDemo' //分页容器的id
            ,count: 100 //总页数
            ,skin: '#1E9FFF' //自定义选中色值
            //,skip: true //开启跳页
            ,jump: function(obj, first){
                if(!first){
                    layer.msg('第'+ obj.curr +'页', {offset: 'b'});
                }
            }
        });

        //上传
        upload.render({
            elem: '#uploadDemo'
            ,url: '' //上传接口
            ,done: function(res){
                console.log(res)
            }
        });

        slider.render({
            elem: '#sliderDemo'
            ,input: true //输入框
        });

        //底部信息
        var footerTpl = lay('#footer')[0].innerHTML;
        lay('#footer').html(layui.laytpl(footerTpl).render({}))
            .removeClass('layui-hide');
    });
});

function add() {
    layer.open({
        type : 2,
        title : '添加',
        maxmin : true,
        shadeClose : false, // 点击遮罩关闭层
        area : [ '800px', '520px' ],
        content : '../country/add'// iframe的url
    });
}

function edit(data) {
    layer.open({
        type : 2,
        title : '编辑',
        maxmin : true,
        shadeClose : false, // 点击遮罩关闭层
        area : [ '800px', '520px' ],
        content : '../country/edit/' + data.code// iframe的url
    });
    // $.ajax({
    //     cache : true,
    //     type : "POST",
    //     url : "/edit",
    //     contentType: 'application/json;charset=UTF-8',
    //     data : JSON.stringify(data),// 你的formid
    //     // async : false,
    //     error : function(request) {
    //         parent.layer.alert("Connection error");
    //     },
    //     success : function(data) {
    //         if (data.code == 0) {
    //             parent.layer.msg("操作成功");
    //             parent.reLoad();
    //             var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
    //             parent.layer.close(index);
    //
    //         } else {
    //             parent.layer.alert(data.msg)
    //         }
    //
    //     }
    // });
}
function del(data){
    var params = {
        "ids": data
    };
    debugger;
    $.ajax({
        cache : true,
        type : "POST",
        url : "/country/del",
        data : params,// 你的formid
        async : false,
        error : function(request) {
            parent.layer.alert("Connection error");
        },
        success : function(data) {
            if (data.code == '200') {
                parent.layer.msg("操作成功");
                parent.reLoad();
                var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
                parent.layer.close(index);

            } else {
                parent.layer.alert(data.msg)
            }

        }
    });
}